<template>
  <div class="container-a">
    <group>
      <x-input title="日志标题" v-model="titleV" placeholder="请输入日志标题" text-align="right"></x-input>
      <cell :title="labelT1">
        <div class="rw-wrap">
          <span class="rw"
                v-for="i in rType"
                :key="i.value"
                :class="{active:cType.value === i.value}"
                @click="_cType(i)">
            {{i.txt}}
          </span >
        </div>
      </cell>
      <cell :title="labelT3">
        <div class="add-wrap">
          <div class="a-s">人员</div>
          <div class="add-i-wrap">
            <i class="iconfont icon-tianjia add-i"></i>
          </div>
        </div>
      </cell>
      <x-textarea placeholder="请输入日志内容"  :height="260" id="rc"></x-textarea>
    </group>
    <div class="btn-wrap">
      <div class="btn-b" @click="submitB">发送</div>
      <div class="btn-g" @click="saveR">保存为草稿</div>
    </div>
  </div>
</template>

<script>
  import editPage from "./editPage"
  export default editPage
</script>

<style scoped lang="scss">
  @import "../../css/common";
  .rw-wrap{
    .rw{
      padding: 4px 16px;
      margin: 0 10px;
      background-color: #fff;
      border: 1px solid #5499ff;
      color: #5499ff;
      border-radius: 14px;
      font-size: 14px;
    }
    .active{
      background-color: #5499ff;
      color: #fff;
      position: relative;
      &:before{
        content: "\E629";
        font-family: "iconfont" !important;
        font-size: 18px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        position: absolute;
        top: -10px;
        right: -9px;
        color: #f44336;
      }
    }
  }
  .add-wrap{
    display: flex;
    align-items: center;
    .a-p{
      padding: 4px 10px;
      margin: 0 10px;
      background-color: #fff;
      border: 1px solid #5499ff;
      color: #5499ff;
      border-radius: 14px;
      font-size: 14px;
    }
    .active{
      background-color: #5499ff;
      color: #fff;
      position: relative;
      &:before{
        content: "\E629";
        font-family: "iconfont" !important;
        font-size: 18px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        position: absolute;
        top: -10px;
        right: -9px;
        color: #f44336;
      }
    }
    .add-i-wrap{
      display: inline-block;
      height: 100%;
      text-align: center;
      margin-left: 10px;
    }
    .add-i{
      color: $blue_theme;
      font-size: 18px;
    }
    .a-s{
      border-radius: 2px;
      background-color: #99caff;
      color: #5f5f5f;
      position: relative;
      padding: 3px 8px;
      font-size: 15px;
      &:before{
        @include iconCode("\e639");
        position: absolute;
        top: -10px;
        right: -6px;
        font-size: 16px;
        color: #ff3e42;
      }
    }
  }
</style>
